<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            /*字体颜色，也可以用颜色代码表表示*/
            color: green;
            /*背景颜色*/
            background-color: red;
            /*字体粗细 100~900*/
            font-weight: 600;
            /*字体大小*/
            font-size: 20px;
            /*字体倾斜*/
            font-style: italic;
            /*文本对齐方式，默认在左边*/
            text-align: right;
            /*字体样式*/
            font-family: 宋体;
        }

        .c2 {
            /*两端对其*/
            text-align: justify;
        }

        .c3{
            width: 300px;
            height: 300px;
            background-color: gray;
            /*水平居中*/
            text-align: center;
            /*垂直居中，值等于height的值*/
            line-height: 300px;
        }

        img{
            height: 100px;
            width: 100px;
            /*图片和文字相对位置的微调，一般应用在img标签或者图标标签*/
            vertical-align: -44px;
        }
    </style>
</head>
<body>

<!--常见文本样式-->
<p class="c1">ALEX</p>

<!--两端对齐-->
<p class="c2">sfjas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;
    slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjd
    l;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflk
    sjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkj
    as;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ld
    fjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldf
    kj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;df
    jas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa
    ;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ld
    fja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjd
    l;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfj
    sa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;as
    as;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;l
    kasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsf
    sdklfja;sljf;lkasjflksjdl;fkjas;ldfja
    ;slfjas;ldfjsa;ldfjsa;ldfkj;aslfjd;slakjfa;ljdflajfdas;fjsa;ldfjas;dfjas;dfjas;ldfjas;ld
    fjas;ldfjas;ldfjasl;dfjaskldfjasl;dfjal;sdfjas;ldfjaslkfjdasdf
</p>

<!--水平和垂直居中-->
<div class="c3">Yuan</div>

<!--在html中，图片也可以看做是一个文本-->
<!--图片和文字相对位置的微调-->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2986333581,3955387280&fm=26&gp=0.jpg" >中国

</body>
</html>